//聊天记录
import Drawer from "@src/components/Drawer";
import React, {useEffect, useRef} from "react";
import "./index.scss"
import {getUserInfo} from "@src/utils/userInfo"

interface Sender {
    avatar: string;
    name: string;
    email: string | null;
    isVisitor: boolean;
}

interface Message {
    id: string;
    groupId: string;
    content: string;
    sender: Sender;
    timestamp: string;
}

type ChattingRecordsProps = {
    isOpen: boolean; // 当前的显示状态
    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; // 用于改变状态的函数
    recordList:Message[]
};

const ChattingRecords: React.FC<ChattingRecordsProps> = ({isOpen, setIsOpen,recordList}) => {
    const recordRef = useRef<HTMLUListElement>(null);
    const {user} = getUserInfo();
    // 滚动到底部的方法
    const scrollToBottom = () => {
        if (recordRef.current) {
            recordRef.current.scrollTo({
                top: recordRef.current.scrollHeight, // 滚动到元素的底部
                behavior: 'smooth' // 平滑滚动
            });
        }
    };

    useEffect(() => {
        scrollToBottom()
    }, [recordList]);
    return <Drawer position="left" width="80%" isOpen={isOpen} setIsOpen={setIsOpen}>
        <div className="chatting-records">
            <ul className="record" ref={recordRef}>
                {recordList.map((item) =>
                    <li key={item.id + item.content}>
                        <div className={item.sender.name == user.name ? "my-li" : ""}>
                            <div>
                                <img className="userHead" src={item.sender.avatar} alt=""/>
                            </div>
                            <div>
                                <p className="name">{item.sender.name}</p>
                                <div className="record-content">{item.content}</div>
                            </div>

                        </div>
                    </li>
                )}
            </ul>
        </div>
    </Drawer>
}
export default ChattingRecords;